<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view class="pagebgf" v-show="!loadingone" :style="familyList.length <=0?'background:#f5f5f5':''">
			<navbar name="我的家人"></navbar>
			<block v-for="(item,idx) in familyList" :key="idx">
				<view class="family-flex" @tap.stop="familyTap(item,idx)">
					<image class="user-image" :src="item.avatarUrl"></image>
					<!-- <image v-if="item.relationName =='父亲'" class="user-image" mode="aspectFit"
						src="https://bsyjk-pic.bsyjk.cn/fatherImage/419D40B313EC4FB7A56F45C839279507.png">
					</image>
					<image v-if="item.relationName =='母亲'" class="user-image" mode="aspectFit"
						src="https://bsyjk-pic.bsyjk.cn/motherImage/110DD0CAB962479A992679793A5818CC.png">
					</image>
					<image v-if="item.relationName =='伴侣'" class="user-image" mode="aspectFit"
						src="https://bsyjk-pic.bsyjk.cn/partnerImage/D5363339740B43A4B7855A6104E3B8B0.png">
					</image>
					<image v-if="item.relationName =='女儿'" class="user-image" mode="aspectFit"
						src="https://bsyjk-pic.bsyjk.cn/girlImage/72CE9F1F273D42B9834D93CFE37FF843.png">
					</image>
					<image v-if="item.relationName =='儿子'" class="user-image" mode="aspectFit"
						src="https://bsyjk-pic.bsyjk.cn/sonImage/0BAC659F61A442428E005326C7AA4A06.png">
					</image>
					<image v-if="item.relationName =='自己'" class="user-image" mode="aspectFit"
						:src="item.gender == 1?'https://bsyjk-pic.bsyjk.cn/partnerImage/D5363339740B43A4B7855A6104E3B8B0.png':'http://static.bsyjk.cn/woman/4F85514265FA416CB88EB3C9D782DE67.png'">
					</image>
					<image v-if="item.relationName !='自己'&&item.relationName !='父亲'&&item.relationName !='母亲'
					&&item.relationName !='伴侣'&&item.relationName !='女儿'&&item.relationName !='儿子'
					&&item.relationName !='添加'" class="user-image" mode="aspectFit"
						src="https://bsyjk-pic.bsyjk.cn/customImage/7881F937917C4299B6BE3B4A835E4E51.png">
					</image> -->
					<view class="family-view">
						<view class="family-title">
							{{item.relationName}}
						</view>
						{{item.anotherUserName}}
					</view>
					<view class="family-vdelete">
						<button @tap.stop="deleteFamil(item,idx,'delete')" class="family-btn" type="default">删除</button>
					</view>
				</view>
				<u-line />
			</block>
			<view class="family-w" v-if="familyList.length <=0">
				<view class="family-bgimage">
				</view>
				<text>
					您还未关联家人
					健康提醒，时刻关注您的家人健康
				</text>
			</view>
			<button type="default" class="BeganToPlan" @tap="addFamily" v-if="familyList.length <=0">添加家人</button>
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLine from "@/uview-ui/components/u-line/u-line.vue"

	export default {
		components: {
			uLoading,
			uLine,
		},
		data() {
			return {
				loadingone: false,
				familyList: [] //家人
			}
		},
		onLoad() {
			this.userRelation() //获取家人
		},
		methods: {
			addFamily(){//添加家人
				uni.navigateTo({
					url:'/pagesHome/family-connectivity/family-connectivity'
				})
			},
			// 删除家人
			deleteUserRelation(relationId) {
				// let fdata = {
				// 	relationId: relationId
				// }
				let _this = this;
				this.$api.delete(global.apiUrls.userRelation+relationId, {})
					.then(res => {
						if (res.data.code == 1000) {
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
							_this.userRelation() //获取家人
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					}).catch(err => {})
			},
			// 删除家人
			deleteFamil(item, index, type) {
				console.log(item,69)
				this.deleteUserRelation(item.userRelationId)
			},
			// 查看家人记录
			familyTap(item, index) {
				console.log(item, 73)
				// uni.navigateTo({
				// 	url: '/pages/subpackage/home/healthData/healthData?hisUserId=' + item.anotherUserId+'&pageTitle=我的家人' +'&shareFlag='+1
				// })
				this.$urouter.navigateTo({
					url: '/pagesHome/family-connectivity/family-internet-list',
					params: {
						anotherUserId: item.anotherUserId,
						index: index
					}
				});

			},
			userRelation() {
				this.loadingone = true
				let _this = this;
				// uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
				this.$api.get(global.apiUrls.userRelation + uni.getStorageSync(global.IS_DEV ? 'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							_this.familyList = result;
						}
						_this.loadingone = false;
					}).catch(err => {})
			},
		},
	}
</script>

<style lang="scss">
	@import "../../find/basescss/basescss.scss";

	.family-flex {
		width: 706upx;
		height: 191upx;
		padding: 30upx 0;
		box-sizing: border-box;
		display: flex;
		margin: 0 auto;

		.user-image {
			width: 130upx;
			height: 130upx;
			background: pink;
			margin-right: 18upx;
			border-radius: 50%;
		}

		.family-view {
			width: 420upx;
			font-size: 24upx;
			font-weight: 800;
			color: #9B9B9B;

			.family-title {
				font-size: 36upx;
				font-weight: 800;
				color: #333333;
				padding: 24upx 0 4upx;
			}
		}

		.family-vdelete {
			width: 130upx;

			.family-btn {
				width: 115upx;
				height: 62upx;
				font-size: 24upx;
				line-height: 62upx;
				padding: 0;
				background: #F56767;
				color: #fff;
				float: right;
				margin-top: 30upx;
			}
		}
	}
</style>
